import { View } from "@tarojs/components";
import Taro, { useTabItemTap } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { AtSteps } from "taro-ui";
import GoodsList from "./components/GoodsList";
import "./index.scss";
import dayjs from "dayjs";
import { getAddressById } from "../../api/address";
const stepBarList = [
  { title: "创建订单" },
  { title: "商家接收" },
  { title: "配送" },
  { title: "售后服务" }
];

export default () => {
  const [current, SetCurrent] = useState<number>();
  const [orderMsg, SetOrderMsg] = useState<any>();
  const [detail, SetDetailMsg] = useState<any>();
  useEffect(() => {
    const orderDetail = JSON.parse(Taro.getStorageSync("orderDetail"));
    const detailMsg = JSON.parse(Taro.getStorageSync("detailMsg"));

    getAddressById(orderDetail.addressId).then(resp => {
      console.log(resp);

      SetDetailMsg(resp);
    });
    SetOrderMsg(orderDetail);
    console.log(orderDetail);
    console.log(detailMsg);
    const s = orderDetail.orderStatus;
    switch (s) {
      case 1:
        SetCurrent(4);
        break;
      case 2:
        SetCurrent(1);
        break;
      case 3:
        SetCurrent(2);
        break;
      case 4:
        SetCurrent(2);
        break;
      case 5:
        SetCurrent(2);
        break;
      case 6:
        SetCurrent(4);
        break;
      case 7:
        SetCurrent(3);
        break;
      case 8:
        SetCurrent(3);
        break;
      case 9:
        SetCurrent(3);
        break;
      case 10:
        SetCurrent(4);
        break;
      case 11:
        SetCurrent(2);
        break;
      case 12:
        SetCurrent(4);
        break;
      case 13:
        SetCurrent(4);
        break;
    }
  }, []);

  return (
    <View className="order_detail_wrapper">
      <View className="stepbar" style={{ paddingTop: 20 }}>
        <View className="stepbar_wrapper">
          <AtSteps items={stepBarList} current={current} onChange={() => {}} />
        </View>
      </View>
      {/* 头部信息 */}
      <View className="order_detail_title">
        <View className="order_detail_title_one">
          感谢您对沃尔玛的信任，期待再次光临
        </View>
        <View className="order_detail_title_two">
          温馨提示:请厉行节约，杜绝浪费
        </View>
      </View>
      {/* 订单内商品清单  */}
      <View className="order_detail_list">
        {orderMsg && (
          <GoodsList list={orderMsg.goodsList} allPrice={orderMsg.allPrice} />
        )}
      </View>
      {/* 配送信息 */}
      <View className="order_detail_express">
        <View className="order_detail_express_title">配送信息</View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">配送时间</View>
          <View className="order_detail_express_msg_two">
            {" "}
            {orderMsg && dayjs(orderMsg.createTime).format("YYYY/MM/DD")}
          </View>
        </View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">配送地址</View>
          <View className="order_detail_express_msg_two">
            {detail && detail.detailedAddress}
          </View>
        </View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">送达人</View>
          <View className="order_detail_express_msg_two">
            {detail && detail.consigneeName + " " + detail.phone}
          </View>
        </View>
      </View>
      {/* 订单信息 */}
      <View className="order_detail_express">
        <View className="order_detail_express_title">订单信息</View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">订单号</View>
          <View className="order_detail_express_msg_two">
            {orderMsg && orderMsg.orderId}
          </View>
        </View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">下单时间</View>
          <View className="order_detail_express_msg_two">
            {orderMsg && dayjs(orderMsg.createTime).format("YYYY/MM/DD")}
          </View>
        </View>
        <View className="order_detail_express_msg">
          <View className="order_detail_express_msg_one">支付方式</View>
          <View className="order_detail_express_msg_two">微信支付</View>
        </View>
      </View>

      <View style={{ height: 20 }}></View>
    </View>
  );
};
